<template>
	<view class="pay">
		<view class="money">
			￥{{tatolPrice}}
		</view>
		<button type="primary" size="default" @click="pay">支付</button>
		<view class="back"  @click="back">取消</view>
	</view>
</template>

<script setup>
	import {ref,reactive} from 'vue'
	import Store from "../../store/index.js"
	import { onLoad } from '@dcloudio/uni-app'
	import * as API from '../../api/index.js'
	const store = Store()
	let tatolPrice = ref(0)
	let orderId = ref('')
	onLoad((option)=>{
		tatolPrice.value  = option.price
		orderId.value = option.orderId
	})
	//取消支付
	function back(){
		uni.navigateBack()
	}
	//确认支付
	function pay(){
		let car = {
			userName:'',
			orderId:'',
			list:[],
			totalPrice:0,
			totalCount:0,
			orderTable:''
		}
		car.userName = store.userInfo.userName
		car.orderId = orderId.value
		car.totalPrice = tatolPrice.value
		car.orderTable = store.table
		for(let i=0;i<store.car.length;i++){
			if(car.orderId==store.car[i].orderId){
				car.list = store.car[i].list
			}
		}
		car.totalCount = car.list.length
		API.order(car).then((res)=>{
			store.car = store.car.filter(item=>{
				return item.orderId !=car.orderId
			})
			store.car_hadPay =reactive([])
			// console.log(res)
			API.getHistoryOrder(store.userInfo.userName).then(res=>{
				// console.log(res)
				res.data.orderList.forEach(item=>{
					item.list = JSON.parse(item.list)
					item.totalCount = item.list.length
				})
				store.car_hadPay.push(...res.data.orderList)
				wx.showToast({
				  title: '支付成功',
				  icon: 'success',
				  duration: 1500
				})
				setTimeout(function(){
					uni.switchTab({
						url:"../order/order"
					})
				},1800)
			})
		})
	}
</script>

<style lang="less" scoped>
	.pay{
		width: 100vw;
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		.money{
			margin-top: 20px;
			font-size: 40px;
		}
		button{
			width: 300px;
			height: 50px;
			line-height: 50px;
			text-align: center;
			margin-top: 50px;
			color: white;
		}
		.back{
			margin-top: 10px;
			color:#bdbdbd;
		}
	}
	
</style>